<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>接口管理与测试</title>
<style>
    .container {
        display: flex;
    }

    .sidebar {
        width: 200px;
        background-color: #f0f0f0;
        padding: 20px;
    }

    .main {
        flex: 1;
        padding: 20px;
    }

    .interface-form {
        display: flex;
        align-items: center;
        margin-bottom: 10px;
    }

    .interface-form input, .interface-form select, .interface-form textarea {
        margin-right: 10px;
    }

    .response {
        margin-top: 20px;
        padding: 10px;
        border: 1px solid #ccc;
    }
</style>
</head>
<body>
<div class="container">
    <div class="sidebar">
        <ul>
            <li><a href="#" onclick="showInterfacePage()">接口管理</a></li>
            <li><a href="#" onclick="showTestPage()">个人中心</a></li>
        </ul>
    </div>
    <div class="main">
        <div id="interfacePage">
            <h2>接口管理</h2>
            <div id="interfaceList">
                <!-- 这里用来展示接口列表 -->
            </div>
            <div class="interface-form">
                <input type="text" id="interfaceName" placeholder="接口名称">
                <select id="requestType" onchange="showRequestBody(this)">
                    <option value="GET">GET</option>
                    <option value="POST">POST</option>
					<option value="DELETE">DELETE</option>
                    <option value="PUT">PUT</option>
                </select>
                <input type="text" id="url" placeholder="请求URL">
                <textarea id="requestBody" placeholder="请求体" style="display: none;"></textarea><br><br>
                <button onclick="addInterface()">保存</button>
            </div>
            <div class="response" id="response"></div>
        </div>
        <div id="testPage" style="display: none;">
            <h2>个人中心</h2>
			
			个人信息部分
			<div>
				<h2>个人信息</h2>
			</div>
			<div id="personalInfo" style="display: none;">
				<p>姓名：zhangsan</p>
				<p>微信：zhangsan123</p>
				<p>电话：13512345678</p>
				<p>QQ：123456789</p>
				<p>邮箱：zhangsan@example.com</p>
			</div>

			<button onclick="showPersonalInfo()">查看个人信息</button>

			<!-- 账户信息部分 -->
			<div>
				<h2>账户信息</h2>
			</div>
			<div id="accountInfo" style="display: none;">
				<p>账户：zhangsan123</p>
				<p>密码：********</p>
				<p>电话号码：13512345678</p>
				<p>验证码：1234</p>
			</div>

			<button onclick="showAccountInfo()">查看账户信息</button>
					
        </div>
    </div>
</div>

<script>
    let interfaces = [];

    function showInterfacePage() {
        document.getElementById("interfacePage").style.display = "block";
        document.getElementById("testPage").style.display = "none";
    }

    function showTestPage() {
        document.getElementById("interfacePage").style.display = "none";
        document.getElementById("testPage").style.display = "block";
    }

    function showRequestBody(selectElement) {
        const requestBody = document.getElementById("requestBody");
        if (selectElement.value === "POST") {
            requestBody.style.display = "block";
        } else {
            requestBody.style.display = "none";
        }
    }

    function addInterface() {
        const interfaceName = document.getElementById("interfaceName").value;
        const requestType = document.getElementById("requestType").value;
        const url = document.getElementById("url").value;
        const requestBody = document.getElementById("requestBody").value;
        interfaces.push({ name: interfaceName, type: requestType, url: url, body: requestBody });
        renderInterfaces();
    }

    function renderInterfaces() {
        const interfaceList = document.getElementById("interfaceList");
        interfaceList.innerHTML = "";
        interfaces.forEach((interface, index) => {
            const div = document.createElement("div");
            div.innerHTML = `
                <input type="checkbox" id="interface${index}">
                <label for="interface${index}">${interface.name} - ${interface.type} - ${interface.url}</label>
                <button onclick="executeInterface(${index})">执行</button>
                <button onclick="deleteInterface(${index})">删除</button>
            `;
            interfaceList.appendChild(div);
        });
    }

    function executeInterface(index) {
		// 这里模拟发送请求以及展示响应结果
		const response = `接口${interfaces[index].name} 请求成功`;
		document.getElementById("response").innerText = response;
    }

    function deleteInterface(index) {
        interfaces.splice(index, 1);
        renderInterfaces();
    }
	
	function showPersonalInfo() {
		var personalInfo = document.getElementById("personalInfo");
		personalInfo.style.display = "block";
    }

    function showAccountInfo() {
        var accountInfo = document.getElementById("accountInfo");
        accountInfo.style.display = "block";
    }
</script>
</body>
</html>